// ? 学院人员信息渲染
function render() {
    axios.get("/students")
        .then(({
            data: {
                data
            }
        }) => {
            // 渲染总人数
            $('.total').html(data.length)
            const arr = data.map((e) => {
                const {
                    age,
                    area,
                    city,
                    hope_salary,
                    id,
                    province,
                    name,
                    gender,
                    group
                } = e
                return ` 
                <tr>
                <td>${name}</td>
                <td>${age}</td>
                <td>${gender===0?"男":"女"}</td>
                <td>第${group}组</td>
                <td>${hope_salary}</td>
                <td>${province}${city}${area}</td>
                <td>
                  <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id='${id}'></i></a>
                  <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id='${id}'></i></a>
                </td>
              </tr> 
                `
            }).join("")
            $(".list").html(arr)
        })
}
render()


// ? 学生信息删除
$(".list").on("click", ".bi-trash", function () {
    const id = $(this).data("id")
    // console.log(id)
    axios.delete(`/students/${id}`)
        .then(({
            status
        }) => {
            // console.log(status)
            if (status !== 204) return alert("删除失败")
            alert("删除成功")
            render()
        })
})

// ? 学生信息添加   bootstrap模态框
const modalBox = $('#modal')
const modal = new bootstrap.Modal(modalBox)
// bootstrap模态框  操纵方式
// modal.show() // 显示
// modal.hide() // 隐藏
// modal.toggle() // 切换
$("#openModal").on("click", () => {
    $('form')[0].reset()
    const add = $('#modal').data("id")
    modal.show()

    // ? 调用添加接口完成添加 
    // const form = modalBox.querySelector('form')
    $('#submit').on("click", () => {
        const data = serialize(form, {
            hash: true
        })
        // 处理格式（后台部分数据需要number格式）
        data.age = Number(data.age)
        // console.log(data)
        data.hope_salary = +data.hope_salary
        data.salary = +data.salary
        data.gender = +data.gender
        data.group = +data.group
        axios.post('/students', data).then(({
            data
        }) => {
            console.log(data)
            const {
                message
            } = data
            alert(message)
            render()
        })
        modal.hide()
    })
})

// ? 添加框 省市区 渲染 
const initCity = async () => {
    axios.get('/api/province').then(({
        data: {
            data
        }
    }) => {
        const phtml = data.map(item => `<option value="${item}">${item}</option>`).join('')
        $('[name=province]').html(`<option value="">--省份--</option>${phtml}`)
        // 监听省份的选择
        $('[name=province]').on('change', async () => {
            // 省份重新选择，市和区肯定要重置
            $('[name=city]').val("")
            $('[name=area]').val('')

            // 动态渲染市
            axios.get('/api/city', {
                params: {
                    pname: $('[name=province]').val()
                }
            }).then(({
                data: {
                    data
                }
            }) => {
                // console.log(res);
                const chtml = data.map((item) => `<option value="${item}">${item}</option>`).join('')
                $('[name=city]').html(`<option value="">--城市--</option>${chtml}`)
            })

        })
        // 监听城市的选择
        $('[name=city]').on('change', async () => {
            // 城市重新选择，区肯定要重置
            $('[name=area]').val('')
            // 动态渲染地区
            axios.get('/api/area', {
                params: {
                    pname: $('[name=province]').val(),
                    cname: $('[name=city]').val()
                }
            }).then(({
                data: {
                    data
                }
            }) => {
                const ahtml = data.map((item) => `<option value="${item}">${item}</option>`).join('')
                $('[name=area]').html(`<option value="">--地区--</option>${ahtml}`)
            })
        })
    })

}
initCity()

// ? 点修改 - 显示弹框
$(".list").on('click', ".bi-pen", function () {
    const modalBox = document.querySelector('#modal')
    // console.log(11)
    const id = $(this).data("id")
    axios.get(`/students/${id}`).then(({
        data: {
            data
        }
    }) => {
        console.log(data);
        const {
            province,
            area,
            city
        } = data
        const fields = [...modalBox.querySelectorAll('form [name]')]
        fields.forEach(item => {
            if (item.name === 'gender') {} else {
                item.value = data[item.name]
            }
        })
        fields.forEach(item => {
            if (item.name === 'gender') {
                // 处理性别回显
                if (+item.value === data[item.name]) item.checked = true
            } else {
                item.value = data[item.name]
            }
        })
        // 处理省市区的回显
        // 动态渲染市
        axios.get('/api/city', {
            params: {
                pname: $('[name=province]').val()
            }
        }).then(({
            data: {
                data
            }
        }) => {
            const chtml = data.map((item) => `<option value="${item}">${item}</option>`).join('')
            $('[name=city]').html(`<option value="">--城市--</option>${chtml}`)
            $('[name=city]').val(city)
        })
        const pname = province
        const cname = city
        // 动态渲染区 
        axios.get('/api/area', {
            params: {
                pname,
                cname
            }
        }).then(({
            data: {
                data
            }
        }) => {
            const ahtml = data.map((item) => `<option value="${item}">${item}</option>`).join('')
            $('[name=area]').html(`<option value="">--地区--</option>${ahtml}`)
            $('[name=area]').val(area)
        })

    })
    modal.show()
    $('#submit').on("click", () => {
        const data = serialize(form, {
            hash: true
        })
        // 处理格式（后台部分数据需要number格式）
        data.age = Number(data.age)
        // console.log(data)
        data.hope_salary = +data.hope_salary
        data.salary = +data.salary
        data.gender = +data.gender
        data.group = +data.group
        axios.put(`/students/${id}`,data).then(({
            data
        }) => {
            console.log(data)
            const {
                message
            } = data
            alert(message)
            render()
        })
        modal.hide()
    })
})